<template>
  <div class="my-apps-container">
    <div class="page-header">
      <h1>我的应用</h1>
      <a-button type="primary" @click="$router.push('/create-app')">
        <PlusOutlined />
        创建新应用
      </a-button>
    </div>
    
    <div class="apps-content">
      <a-spin :spinning="loading">
        <a-empty v-if="!loading && apps.length === 0" description="暂无应用">
          <a-button type="primary" @click="$router.push('/create-app')">
            创建第一个应用
          </a-button>
        </a-empty>
        
        <a-row v-else :gutter="[16, 16]">
          <a-col v-for="app in apps" :key="app.id" :xs="24" :sm="12" :md="8" :lg="6">
            <a-card hoverable class="app-card">
              <template #cover>
                <div class="app-cover">
                  <img v-if="app.icon" :src="app.icon" :alt="app.name" />
                  <div v-else class="default-cover">
                    <AppstoreOutlined />
                  </div>
                </div>
              </template>
              
              <a-card-meta :title="app.name" :description="app.description" />
              
              <template #actions>
                <EditOutlined @click="editApp(app)" />
                <EyeOutlined @click="viewApp(app)" />
                <DeleteOutlined @click="deleteApp(app)" />
              </template>
            </a-card>
          </a-col>
        </a-row>
      </a-spin>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { PlusOutlined, AppstoreOutlined, EditOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { getMyApps } from '@/api/app'
import type { App } from '@/types/api'

const loading = ref(false)
const apps = ref<App[]>([])

const fetchMyApps = async () => {
  try {
    loading.value = true
    const response = await getMyApps()
    if (response.code === 200) {
      apps.value = response.data.records || []
    }
  } catch (error) {
    console.error('获取应用列表失败:', error)
    message.error('获取应用列表失败')
  } finally {
    loading.value = false
  }
}

const editApp = (app: App) => {
  console.log('编辑应用:', app)
}

const viewApp = (app: App) => {
  console.log('查看应用:', app)
}

const deleteApp = (app: App) => {
  console.log('删除应用:', app)
}

onMounted(() => {
  fetchMyApps()
})
</script>

<style scoped>
.my-apps-container {
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.app-card {
  height: 100%;
}

.app-cover {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

.app-cover img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.default-cover {
  font-size: 48px;
  color: #ccc;
}
</style>